import React from "react";
import { createPortal } from "react-dom";
import "./App.css";
import ThemeContext from "./context/theme-context";
import GetDom from "./views/01.获取dom";
import ChildComponent from "./components/ChildComponent";
import Index from "./views/index";
interface ChildProps {
  focus: (str: string) => void;
  sayHello: (name: string) => void;
}
function App() {
  const [theme, setTheme] = React.useState("light"); // 主题
  const [inputVal, setInputVal] = React.useState(""); // 输入框的值

  const childRef = React.useRef<ChildProps>(null);
  const handleTest = () => {
    console.log(childRef);
    childRef.current?.focus("hah"); // 拿到组件实例调用方法
    childRef.current!.sayHello("123");
  };
  // 受控组件
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputVal(e.target.value);
    console.log(inputVal);
  };

  return (
    <ThemeContext.Provider value={theme}>
      <GetDom></GetDom>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        setTheme
      </button>
      <ChildComponent ref={childRef}></ChildComponent>

      <button onClick={() => handleTest()}>test</button>
      <hr />
      <input type="text" onChange={(e) => handleChange(e)} value={inputVal} />
      <Index></Index>
      {/* 通过 portal将元素挂载到 指定容器中 */}
      {createPortal(
        <div>
          <h2>portal</h2>
        </div>,
        document.getElementById("second")!
      )}
    </ThemeContext.Provider>
  );
}

export default App;
